<html>
<head>
<script type="text/javascript">
	var request;
	function validate()
	{
		var idField = document.getElementById("userId");
		var url = "validate?id=" + encodeURIComponent(idField.value);
		if(typeof XMLHttpRequest != "undefined"){
			request = new XMLHttpRequest();
		}else if (window.ActiveXObject) {
		    request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		request.open("GET", url, true);
		request.onreadystatechange = callback;
		request.send(null);
	}

	function callback() {
	    if (request.readyState == 4) {
	        if (request.status == 200) {
				parseMessage();
	        }
	    }
	}

	function parseMessage() {
		 var message = request.responseXML.getElementsByTagName("message")[0];
		 setMessage(message.childNodes[0].nodeValue);
	}

	function setMessage(message) {
	     var userMessageElement = document.getElementById("userIdMessage");
	     var messageText;
	     if (message == "invalid") {
	         userMessageElement.style.color = "red";
	         messageText = "Invalid User Id";
	     } else {
	         userMessageElement.style.color = "green";
	         messageText = "Valid User Id";
	     }
	     var messageBody = document.createTextNode(messageText);
	     // if the messageBody element has been created simple replace it otherwise
	     // append the new element
	     if (userMessageElement.childNodes[0]) {
	         userMessageElement.replaceChild(messageBody,  userMessageElement.childNodes[0]);
	     } else {
	         userMessageElement.appendChild(messageBody);
	     }
	}
	
</script>
</head>
<body>
	<div> <input type="text" size="20" id="userId" name="id" onkeyup="validate();"><div id="userIdMessage"></div>
	</div>
</body>
</html>